.placerholder {
    color: #bbb;
}

.wrap {
    color: #333;
    font-size: .28rem;
    padding: 0 .12rem;
    height: .8rem;
    line-height: .8rem;
    display: inline-block;
}

// title 动画
.enter {
    transform: translateY(-100%);
    opacity: 0;

    &.enterActive {
        transform: translateY(50%);
        opacity: 1;
        transition: all .4s ease-in-out;
    }
}

.leave {
    transform: translateY(-50%);
    opacity: 1;

    &.leaveActive {
        transform: translateY(100%);
        opacity: 0;
        transition: all .4s ease-in-out;
    }
}

.layer {
    @pickerPrefixCls: rmc-picker;
    @itemHeight: 35px;
    @conHeight: @itemHeight * 5;
    @deepColor: #fff;
    @shallowColor: rgba(221,221,221,0);
    color: #333;
    font-size: 18px;
    background-color: white;
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
    border-top: 1px solid #ccc;
    overflow: hidden;

    .header {
        height: 55px;
        width: 100%;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 15px;

        .confirm {
            color: #AB3B3A;
        }

        .cancel {
            color: #999;
        }

        .titleTrans {
            overflow: hidden;

            .title {
                min-width: 4rem;
                text-align: center;
            }
        }
    }

    .pk {
        display: flex;
        flex-direction: row;
        position: relative;

        .colum {
            position: relative;
            flex: 1;

            // fromTo的样式
            &.middle {
                flex: .5;
            }

            // fromTo的样式
            .error {
                color: red;
                font-size: 14px;
                opacity: 0;
                transition: opacity .3s;

                &.show {
                    opacity: 1;
                }
            }

            .unit {
                position: absolute;
                left: 52%;
                top: @itemHeight*2+3;

                &.year {
                    left: 60%;
                }
            }

            :global {
                [class~="@{pickerPrefixCls}"] {
                    flex: 1;
                    position: relative;
                    height: @conHeight;
                    overflow: hidden;
                }

                [class~="@{pickerPrefixCls}-disabled"] {
                    opacity: .4;
                }

                [class~="@{pickerPrefixCls}-content"] {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    z-index: 1;
                }

                .rmc-picker-item-selected {
                    position: relative;
                }

                [class~="@{pickerPrefixCls}-mask"] {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 100%;
                    margin: 0 auto;
                    width: 100%;
                    z-index: 3;
                    background-image: linear-gradient(to bottom, @deepColor, @shallowColor), linear-gradient(to top, @deepColor, @shallowColor);
                    background-position: top, bottom;
                    background-repeat: no-repeat;
                }

                [class~="@{pickerPrefixCls}-item"] {
                    touch-action: manipulation;
                    text-align: center;
                    font-size: 18px;
                    height: @itemHeight;
                    line-height: @itemHeight;
                    color: #000;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    // direction: rtl;

                }

                .rmc-picker-indicator {
                    width: 100%;
                    height: @itemHeight;
                    position: absolute;
                    left: 0;
                    z-index: 3;
                    border-top: 1px solid transparent;
                    border-bottom: 1px solid transparent;
                    background-position: top, bottom;
                    background-size: 100% 1px;
                    background-repeat: no-repeat;

                    &::before {
                        content: '';
                        width: 100%;
                        height: 1px;
                        background-color: #eee;
                        position: absolute;
                        left: 0;
                        top: 0;
                        transform: translateY(-50%);
                    }

                    &::after {
                        content: '';
                        width: 100%;
                        height: 1px;
                        background-color: #eee;
                        position: absolute;
                        left: 0;
                        top: 100%;
                        transform: translateY(-50%);
                    }

                }
            }
        }

    }
}

// 下面的是from2scroll的样式
.middle {
    flex: .5;
}
